import axios from 'axios'
import React, { useEffect, useState } from 'react'
import styles from './styles/sear.module.css'
import { LeftOutlined} from '@ant-design/icons'
import {useNavigate} from 'react-router-dom'


const Search=()=>{
    const navigate=useNavigate()
    const [list,setlist]=useState([])
    const [name,setname]=useState("")
    const [address,setaddress]=useState('')
    const getlist=async()=>{
        const {data:{data}}=await axios.get(`http://127.0.0.1:3333/wlist?name=${name}&address=${address}`)
        setlist(data)
    }
    useEffect(()=>{
        getlist()
    },[])
    const se=async()=>{
        getlist()
    }
    const sta=async(id)=>{
        navigate(`/tan?id=${id}`)
        localStorage.setItem('list',JSON.stringify(id))
    }
    const [sorindex,setsorindex]=useState('asc')
    const sort=()=>{
        if(sorindex==='asc'){
            setlist(list.sort((a,b)=>a.price-b.price))
            setsorindex('desc')
        }else{
            setlist(list.sort((a,b)=>b.price-a.price))
            setsorindex('asc')
        }
    }
    const [ads,setads]=useState('asc')
    const ju=()=>{
        if(ads==='asc'){
            setlist(list.sort((a,b)=>a.dis-b.dis))
            setads('desc')
        }else{
            setlist(list.sort((a,b)=>b.dis-a.dis))
            setads('asc')
        }
    }
    return(
        <div>
            <div className={styles.top}>
            <span onClick={()=>navigate('/home/show')}><LeftOutlined /></span>
            <input type="text" placeholder='请输入酒店吗，地址等' onChange={(e)=>setname(e.target.value)} onChangeCapture={(e)=>setaddress(e.target.value)}/>
            <span onClick={se}>搜索</span>
            </div>
            <div className={styles.bod}>
                <div className={styles.bo1}>
                    <span onClick={sort}>价钱</span>
                    <span onClick={ju}>距离</span>
                </div>
                <div className={styles.bo2} >
                    {
                        list.map((item,index)=>{
                            return(
                                <div key={item._id} onClick={()=>sta(item,item._id)} className={styles.zi}>
                                    <img src={item.img} alt="" />
                                    <div className={styles.ri}>
                                    <p>{item.name}</p>
                                    <span>{item.address}</span>
                                    <span>{item.dis}</span>
                                    <span style={{color:'red'}}>${item.price}</span>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        </div>
    )
}
export default Search;